<template>
    <view>
        <!-- <view class="navbox">
            <view class="navtext" v-for="(item,index) in navList" :key="index" @click="navswtice(index)" :class="{'text4':navIndex == index}">
                {{item}}
                <view class="boline" v-if="navIndex == index"></view>
            </view>
        </view> -->
        <view class="statusbox">
            <view class="statutext" v-for="(item, index) in statusList" :key="index" @click="staswtice(index)"
                :class="{ 'text5': stIndex == index }">
                {{ item }}
            </view>
        </view>
        <view style="height: 100rpx;"></view>
        <block v-if="!load">
            <view class="load">
                <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
            </view>
        </block>
        <block v-else>
        <block v-if="MyTakeList.length > 0">
            <view class="listbox" v-for="(item, index) in MyTakeList" :key="index"
                @click.stop="nav_to('/pages/together/order_detail?id=' + item.Item[0].ActionCode)">
                <view class="status">
                    {{ getBallyuyue(item) }}
                </view>
                <view class="contentbox">
                    <image class="imgleft" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
                    <view class="rightbox">
                        <view>
                            <view class="nametext">{{ $util.entitiesToUtf16(item.Title) }}</view>
                            <view class="infobox">
                                <image class="infoimg"
                                    src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17229991748171392.png">
                                </image>
                                <view class="infotext">{{ getTime2(item.ServerDate) + ' '+getWeek(item.ServerDate)+item.ServerTime}}</view>
                            </view>
                            <view class="infobox">
                                <image class="infoimg"
                                    src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17229991973631170.png">
                                </image>
                                <view class="infotext hiddenText">{{ item.Place }}</view>
                            </view>
                        </view>
                        <view class="pricebox">
                            <view class="pricetext">{{ item.RegisterFee == 0 ? (item.FeeRule == '免费'?'免费':'柜台结算') : ('￥' + item.RegisterFee) }}</view>
                            <!-- <view class="sum">{{'x1'}}</view> -->
                        </view>
                    </view>
                </view>
            </view>
            <view style="height: 200rpx;"></view>
        </block>
        <block v-else>
            <u-empty mode="list" width="100" height="100" icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true" iconSize="32" text="暂无活动"></u-empty>
        </block>
        </block>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            load:false,
            navList: ['我的活动', '课程订单'],
            navIndex: 0,
            statusList: ['全部', '待使用', '已使用'],
            stIndex: 0,
            PageIndex: 1,
            PageSize: 10,
            MyTakeList: [],
            mystatus: 99,
        };
    },
    onLoad() {
        this.getMyTake()
				uni.$on('circleUpdate',()=>{
					this.PageIndex = 1
					// this.getteam()
					this.getMyTake()
				})
    },
		onUnload() {
		  uni.$off("circleUpdate");
		},
    //下拉刷新
    onPullDownRefresh() {
        this.PageIndex = 1
        this.getMyTake()
        uni.stopPullDownRefresh()
    },
    // 触底事件
    onReachBottom() {
        if (this.isMore) {
            this.PageIndex++
            this.getMyTake()
        }
    },
    methods: {
        async getMyTake() {
            let res = await this.$api.post('Appointment/MyTake', {
                PageIndex: this.PageIndex,
                PageSize: this.PageSize,
                // AppointmentType: '一起挥',
                SignStatus: this.mystatus
            });
            if (res.code == 0) {
                if (this.PageIndex == 1) {
                    this.MyTakeList = res.data
                } else {
                    this.MyTakeList = this.MyTakeList.concat(res.data)
                }
                this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
                this.load = true
            }

        },
        navswtice(index) {
            this.navIndex = index
        },
        staswtice(index) {
            this.stIndex = index
            this.PageIndex = 1
            this.MyTakeList = []
            if (index == 0) {
                this.mystatus = 99
                this.getMyTake()
            } else if (index == 1) {
                this.mystatus = 1
                this.getMyTake()
            } else if (index == 2) {
                this.mystatus = 2
                this.getMyTake()
            } else {
                this.mystatus = -2
                this.getMyTake()
            }
        },
        getBallyuyue(obj) {
            // console.log(obj,'oooo');
            if (obj?.SignStatus == 0) {
                return '待付款';
            } else if (obj?.SignStatus == 1) {
                return "待使用";
            } else if (obj?.SignStatus == 2) {
                return "已使用"
            } else if (obj?.SignStatus == 3) {
                return '已完成'
            } else if (obj?.SignStatus == -2) {
                return '已退款'
            }else{
                return ''
            }
        },
        getTime2(l) {
            let d = new Date(l);
            let timestamp = d.getTime();
            return this.$u.date(timestamp, 'mm-dd');
        },
    },

}
</script>
<style lang='scss'>
page {
    background-color: #f6f6f6;
}

.navbox {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
    padding: 20rpx 0;

    .navtext {
        font-size: 32rpx;
        color: #999999;
        position: relative;
    }

    .text4 {
        color: #000000 !important;
    }

    .boline {
        position: absolute;
        bottom: -20rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 48rpx;
        height: 8rpx;
        background: #000000;
        border-radius: 5rpx;
    }
}

.statusbox {
    width: 100%;
    padding: 20rpx 0;
    // margin: 24rpx auto;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;

    .statutext {
        width: calc(100% / 4);
        // text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #999999;
    }

    .text5 {
			font-weight: bold;
      color: #000000 !important;
    }
}

.listbox {
    width: 686rpx;
    margin: 24rpx auto;
    padding: 24rpx;
    background-color: #fff;
    border-radius: 16rpx;

    .status {
        font-size: 28rpx;
        color: #333333;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #e4e4e4;
    }

    .contentbox {
        display: flex;
        margin-top: 30rpx;

        .imgleft {
            width: 176rpx;
            height: 232rpx;
            border-radius: 8rpx;
            margin-right: 32rpx;
            background-color: #000000;
        }

        .rightbox {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .nametext {
                font-size: 28rpx;
                font-weight: bold;
                color: #333333;
                margin-bottom: 32rpx;
            }

            .infobox {
                display: flex;
                align-items: center;

                .infoimg {
                    width: 32rpx;
                    height: 34rpx;
                    margin-right: 4rpx;
                }

                .infotext {
                    width: 350rpx;
                    font-size: 24rpx;
                    color: #999999;
                }
            }

            .pricebox {
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .pricetext {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333333;
                }

                .sum {
                    font-size: 32rpx;
                    color: #333333;
                }
            }
        }
    }
}
</style>